import React, { Component } from 'react'
import '../../css/fenye.css'
import PageContent from './PageContent';
interface Istate{
    pageindex:number,
    total:number,
    num:number,
    showpage:number,
    list:Array<number>
}
export default class FenYe extends Component<any,Istate> {
  constructor(props:any){
    super(props);
    this.state={
        total:100,//总数
        num:10,//每页显示10条数据
        showpage:5,//连续出现的页码数5个
        pageindex:1,
        list:[1,2,3,4,5]
    }
  }
  reduce=()=>{//减
    this.setState({
      pageindex:this.state.pageindex-1
    })
  }
  add=()=>{//加
    this.setState({
      pageindex:this.state.pageindex+1*1
    })
  }
itemclick=(item:number)=>{
    this.setState({
        pageindex:item
    })
}
settotal=(oldtotal:number)=>{
  if(oldtotal===this.state.total){
    this.setState({
      total:40,
      pageindex:1
    })
    return true
  }else{
    return false
  }
}

search =(index:number)=>{//请求数据
        alert(index)
}
  render() {

      let maxpage = Math.ceil(this.state.total / this.state.num);//最大页数 10
      let start = 1;//开始页数
      let middle = Math.ceil(this.state.showpage / 2) // 3 中间数 且向上取整
  
      let end = maxpage>this.state.showpage?this.state.showpage:maxpage;//展示页数 <=5
      if(this.state.pageindex>middle){//如果点击页面大于中间数 大于三就改变值
          start=this.state.pageindex - middle +1
          //就改变初始值和end值 点击4的时候改变初始值为2 3-2+1
          end=this.state.pageindex + middle -1 
          //end值为4+3-1=6  就为2,3,4,5,6
      }
      if(this.state.pageindex>=maxpage-middle+1){//
          start=maxpage - (middle-1)*2  //6,7,8,9,10
          //就改变初始值和end值 点击4的时候改变初始值为2 3-2+1
          end=maxpage
          //end值为4+3-1=6  就为2,3,4,5,6
      }
      start = start>1?start:1;//当数据很少的时候 就用三元让它默认是1
      let lists = [];
      for(let i =start;i<=end;i++){
          lists.push(i)
      }
      this.search(this.state.pageindex)      
    return (
      <React.Fragment>
        <div>分页</div>
        <button onClick={()=>{this.settotal(this.state.total)}}>改变total的值</button>
        <div className='boxs'>
        
          {this.state.pageindex>1?<div onClick={()=>{this.reduce()}}
        className='prev'>上一页</div>:<div
        className='prev prevs'>上一页</div>}
       
        <PageContent lists={lists} itemclick={this.itemclick} pageindex={this.state.pageindex}></PageContent>
         {this.state.pageindex===maxpage?
         <div className='next prevs'>下一页</div>:
         <div className='next' onClick={()=>{this.add()}}>下一页</div>
         }
        
        </div>
      </React.Fragment>
    )
  }
}
